<template>
   <div class="page-head">
       <div @click="$emit('playpage')"><i class="iconfont icon-fanhui"></i></div>
      <div class="song-name">
          <h5>
          {{playsong.song? playsong.song.name: playsong.al? playsong.al.name:playsong.name }}
          </h5>
          
          <p>{{  playsong.song ?  playsong.song.artists[0].name : playsong.ar?playsong.ar[0].name :playsong.artists? playsong.artists[0].name:''}}</p>
        </div>
      <div><i class="iconfont icon-fenxiangxiao"></i></div>  
    </div>
</template>

<script>
export default {
    props:{
        playsong:Object,
    }
}
</script>

<style lang="less" scoped>
   .page-head{
  
       display: flex;
       div{
           i{
               font-size: 16px;
               color: white;
           }
       }
       .song-name{
         flex: 1;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
        margin: 0 10px;
           color: white;
         h5{
           text-align: center;
          display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        margin: 0;
        width: 100%;
           color: white;
         }
         p{
           width: 100%;
           text-align: center;
           font-size: 12px;
            display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
           color: white;
         }
       }
    }
</style>